<template>
      <div class="header">
         <div class="header-left">
               <div class="iconfont back-icon">&#xe624;</div>
         </div>
         <div class="header-input">
               <span class="iconfont">&#xe632;</span>
               输入城市/景点/游玩主题</div>
          <router-link to="/city">
               <div class="header-right">
                     {{this.city}}
                     <span class="iconfont arrow-icon">&#xe64a;</span>
               </div>
          </router-link>
      </div>
</template>

<script>
    import {mapState} from 'vuex'
    export default {
        name: "HomeHeader",
       computed:{
           ...mapState(['city'])/*将数据映射到计算属性中*/
       }
    }
</script>
<!--scoped：在style标签中加入scoped限制该样式只对当前的组件有效，不会影响其他
            组件的样式, 1rem=5px
     @import:在样式中引入样式
     $bgColor：在自定义的varibles.styl中定义的颜色
     @:代表src这一层目录
-->
<style lang="stylus" scoped>
      @import "../assets/styles/varibles.styl"
      .header
         display : flex;
         line-height : $headerHeight
         background-color: $bgColor
         color #fff
         .header-left
           width : .64rem
           float : left
          .back-icon
            text-align center
            font-size .4rem
         .header-input
            flex : 1
            height .64rem
            line-height .64rem
            margin-top .12rem
            margin-left .2rem
            padding-left .2rem
            background #fff
            border-radius .1rem
            color: #ccc
         .header-right
            min-width: 1.04rem
            padding 0 .1rem
            float: right
            text-align center
            color #fff
           .arrow-icon
              margin-left -.04rem
              font-size .24rem
</style>